// 产品组构成

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin, Row, Col, Progress } from 'antd';
import { ThreeHeaderC } from '../../../components';
import style from './index.less';

class Info extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    const { args } = this.props;
    this.getData(args);
  }

  componentDidUpdate(prevProps) {
    const { args } = this.props;
    if (JSON.stringify(args) !== JSON.stringify(prevProps.args)) {
      this.getData(args);
    }
  }

  getData = (data) => {
    this.props.dispatch({
      type: 'yieldPerformanceM/getGroupInfo',
      payload: data,
    });
  };

  render() {
    const { loading, yieldPerformanceM } = this.props;
    const { constitute } = yieldPerformanceM;
    return (
      <div className={style.info}>
        <Spin spinning={loading.effects['yieldPerformanceM/getGroupInfo'] == true}>
          <div style={{ marginTop: '10px' }}>
            <ThreeHeaderC title='产品组构成' />
          </div>
          <div className='constitute'>
            {constitute.map((row, ind) => {
              return (
                <div className='constitute-item' key={ind}>
                  <Row>
                    <Col span={10}>
                      <p
                        title={row.productName}
                        style={{
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                        }}
                      >
                        {row.productName}
                      </p>
                    </Col>
                    <Col span={14}>
                      <div style={{ display: 'flex' }}>
                        <span style={{ width: 55 }}>收益率</span>
                        <div style={{ flex: 1 }}>
                          <Progress percent={(Number(row.rate) * 100).toFixed(2)} status='normal' />
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
              );
            })}
          </div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ yieldPerformanceM, loading }) => ({
  yieldPerformanceM,
  loading,
}))(Info);
